import React, { Component } from 'react';
import {AtSearchBar} from 'taro-ui'
import Taro from '@tarojs/taro';
import {View, Text, Navigator, Image} from '@tarojs/components'
import {http} from '../../utils/http'
import {AppointmentItem} from '../../utils/server.interface'
import {h5Wx} from "../../utils/h5.service";
import {APPONINTMENT, RESOURCE_URL} from '../../constants/api'
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {vcmonitor} from "../../utils/tools";
import Index from "../components/water-mark/index";
import './list.scss'

export default class List extends Component {
  state: {
    loadMoreStatus: "more" | "loading" | "noMore"
    appointList: AppointmentItem[]
    searchKey: string
  } = {
    loadMoreStatus: 'loading',
    appointList: [],
    searchKey: '',
  }

  async componentDidShow() {
    vcmonitor(this);
    const appointList = await this.getData(this.page)
    this.setState({appointList})
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
  }

  page = 1

  async getData(page) {
    const appointList = await http.get<AppointmentItem[]>(APPONINTMENT, {p: page, k: this.state.searchKey, allShow: 0})
    if (appointList && appointList.length === 10) {
      this.setState({loadMoreStatus: 'more'})
    } else {
      this.setState({loadMoreStatus: 'noMore'})
    }
    return appointList || []
  }

  onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore') {
      this.setState({loadMoreStatus: 'loading'}, async () => {
        this.page++
        const appointList = await this.getData(this.page)
        const old = this.state.appointList
        this.setState({appointList: [...old, ...appointList]})
      })
    }
  }

  inputChange(e) {
    const value = e
    if (!value) {
      this.setState({searchKey: ''}, async () => {
        await this.search()
      })
    }
    this.setState({searchKey: value})
  }

  async search() {
    this.page = 1
    this.setState({appointList: [], loadMoreStatus: 'loading'}, async () => {
      const appointList = await this.getData(this.page)
      this.setState({appointList})
    })
  }

  async clearSearch() {
    this.setState({searchKey: '', appointList: []})
    await this.search()
  }

  render() {
    const dataColor = Taro.getStorageSync('colorData');
    const {loadMoreStatus, appointList, searchKey} = this.state
    return (
      <View className='appoint-list-root'>
        <Index />
        <GzhAuth />
        <AtSearchBar
          value={searchKey}
          showActionButton
          placeholder='请输入关键词'
          onActionClick={this.search.bind(this)}
          onConfirm={this.search.bind(this)}
          onClear={this.clearSearch.bind(this)}
          onChange={this.inputChange.bind(this)}
        />
        {appointList && appointList.length > 0 &&
        <View className='appoint-content'>
          {appointList.map(item => <Navigator key={item.uuid} className='item'
            url={`/other/appointment/order?itemId=${item.uuid}&orderUUID=${item.order_uuid}`}
          >
            <View className='order-num'>订单号：{item.order_num}（{item.site_name}）</View>
            <View className='name'>{item.name}</View>
            <View className='line' />
            <View className='buy-date'>购买日期：{item.buy_date}</View>
            <View className='item-bottom'>
              <View className='title'>抢购价：<View className='price font-family-price'
                style={`color: ${dataColor.priceColor}`}
              >￥{item.goods_price}</View></View>
              <View className='btn' style={`background-color: ${process.env.mainColor}`}>预约</View>
            </View>
          </Navigator>)}
        </View>
        }
        {appointList && appointList.length <= 0 &&
        <View className='listNull'>
          <Image src={`${RESOURCE_URL}/resources/images/shopnull.png`} mode='widthFix' />
          <View className='text'>什么都没有,去看看别的吧~</View>
        </View>
        }
        <Navigator className='btn-box-result' style={`background-color: ${process.env.mainColor}`}
          url='/other/appointment/my'
        >
          <Text>预约结果</Text>
        </Navigator>
      </View>
    )
  }
}
